<template>
  <!-- 总人数折线图 -->
  <div class="app-container">
    <div class="app-wrap">
      <div class="border-line">
        <div class="flexStart">
          <el-form ref="form" :model="listQuery" label-width="80px" class="flexStart marginR20">
            <el-form-item label="渠道:" label-width="60px">
              <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
                <el-option label="全部" value="" ></el-option>
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期时间:" label-width="90px">
              <el-date-picker is-range v-model="listQuery.dateTime" type="date" class="full-width-input time-box" :clearable="false"/>
            </el-form-item>
            <el-button class="marginL10" type="primary" @click.stop="getDataList(),timeType = -1" style="height:40px">查 询</el-button>
          </el-form>
        </div>
        <line-chart id="lineEcharts" ref="lineEcharts" :keyData="keyData" :legendData="legendData" :dataList="dataList"/>
      </div>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getPersonLine,
} from '@/api/statistics'
import LineChart from '@/components/Echarts/lineChart.vue';

export default {
  name: 'linePopulation',
  components: {
    LineChart,
  },
  data () {
    return {
      channelData: this.$store.state.commonState.channelDataArray,
      keyArray:{
        user_add:[],// 用户注册
        user_line_num:[],// 用户在线
        teen_patti_user_game_num:[],// teen游戏人数
        rummy_user_game_num:[],// rummy游戏人数
      },
      listQuery:{
        agent_id:'',
        dateTime:this.$public.getDateDay(0)+' 00:00:00', 
        start_time:'',
        end_time:'',
      },
      keyData: [],
      legendData: ['当前注册人数','当前在线人数','TeenPatti在线人数','Rummy在线人数'],
      dataList:[]
    }
  },
  created() {
    // this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList()
  },
  methods: {
    // 总人数折线图
    getDataList: throttle(async function () {
      let that = this,params = JSON.parse(JSON.stringify(that.listQuery)),arrayData=[];
      that.keyData = []
      that.dataList = []
      if(params.dateTime){
        params.start_time=that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time=that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }
      const response= await getPersonLine(params)
      if (response.code == 1) {
        if(response.data){
          response.data.forEach(item=>{
            item.date=item.date
            that.keyData.push(item.date)
          })
          that.keyData=Array.from(new Set(that.keyData));
          that.keyData.forEach(date=>{
            arrayData.push({date:date,user_add:0,user_line_num:0,teen_patti_user_game_num:0,rummy_user_game_num:0})
          })
          response.data.forEach(item=>{
            arrayData.forEach(second=>{
              if(item.date==second.date){
                second.user_add=item.user_add
                second.user_line_num=item.user_line_num
                second.teen_patti_user_game_num=item.teen_patti_user_game_num
                second.rummy_user_game_num=item.rummy_user_game_num
              }
            })
          })
          // 折线图
          that.dataList=that.echartData(that.legendData,arrayData)
          that.$nextTick(()=>{
            that.$refs.lineEcharts.getEcharts()
          })
        }
      }else{
        that.$message.error(response.msg)
      }
    }, 3000),
    // 组装数据
    echartData(legendData,data){
      let echartsData=[];
      legendData.forEach(second=>{
        let arrData=[];
        data.forEach(item=>{
          if(second=='当前注册人数'){
            arrData.push(item.user_add)
          }
          if(second=='当前在线人数'){
            arrData.push(item.user_line_num)
          }
          if(second=='TeenPatti在线人数'){
            arrData.push(item.teen_patti_user_game_num)
          }
          if(second=='Rummy在线人数'){
            arrData.push(item.rummy_user_game_num)
          }
        })
        echartsData.push({name:second,data:arrData, type: 'line',showAllSymbol:true})
      })
      return echartsData
    },
  }
}
</script>

<style lang="scss" scoped>
.border-line{
  padding:10px;
  margin:0 auto 40px;
  background: #F9F9F9;
  border-radius: 5px;
  p{
    font-size: 24px;
    margin-left: 20px;
  }
}
</style>
